<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>登入 - layuiAdmin</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon"/>
  <!--<link rel="stylesheet" th:href="@{/layuiadmin/style/font.css}">-->
  <link rel="stylesheet"  th:href="@{/layuiadmin/style/xadmin.css}">
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" th:src="@{/layuiadmin/layui/layui.js}" charset="utf-8"></script>
  <script type="text/javascript" th:src="@{/layuiadmin/layui/xadmin.js}"></script>
</head>
<body class="login-bg">
<div class="login" style="padding-bottom: 20px;">
  <div class="message">管理员登录
  </div>
  <div id="darkbannerwrap"></div>
  <div class="layui-tab">
    <!--<ul class="layui-tab-title">-->
      <!--<li class="layui-this">用户名/密码登录</li>-->
      <!--<li>手机登录</li>-->
    <!--</ul>-->
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">
        <form class="layui-form">
          <!-- 验证登录 -->
          <input name="name" th:placeholder="用户名" id="name" type="text"
                 lay-verify="required" class="layui-input">
          <hr class="hr15">
          <input name="password" lay-verify="required" id="password"
                 th:placeholder="密码" type="password" class="layui-input">
          <hr class="hr15">
          <div class="layui-form-item">
            <div class="layui-input-inline" style="width: 50%;">
              <input type="text" name="check" required lay-verify="required"
                     th:placeholder="验证码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
              <img th:alt="看不清楚点击这里" th:title="看不清楚点击这里" onclick="changeImg(this)" id="yzm"
                   src="/getCode">
            </div>
          </div>
          <hr class="hr15">
          <input lay-submit lay-filter="loginByPassword" id="loginbtn" th:value="登录"
                 style="width: 100%;" type="submit">
          <hr class="hr20">
        </form>
      </div>
<!--      <div class="layui-tab-item">
          <form class="layui-form">
            &lt;!&ndash; 验证登录 &ndash;&gt;
            <input th:placeholder="手机号" id="phone" name="phone"
                   type="text" lay-verify="phone" class="layui-input">
            <hr class="hr15">
            <input type="text" name="code" id="code" required
                   lay-verify="required" th:placeholder="验证码" autocomplete="off"
                   class="layui-input">
            <hr class="hr15">
            <input class="layui-btn layui-btn-radius layui-btn-primary"
                   onclick="sendMessage()" id="btn" name="btn" th:value="获取验证码">

            <hr class="hr15">
            <input th:value="登录" lay-filter="loginByPhone" type="submit" lay-submit
                   style="width: 100%;" id="lo">
            <hr class="hr20">
        </form>
      </div>-->
    </div>
  </div>

</div>
  <script type="text/javascript">
      layui.use('element', function () {
          var element = layui.element;
      });
  </script>
  <script type="text/javascript">
      window.onload = function () {
      }

      function changeImg(obj) {
          obj.src = "/getCode?time=" + new Date().getTime();
      }
  </script>
  <script type="text/javascript">
      var InterValObj; //timer变量，控制时间
      var count = 30; //间隔函数，1秒执行
      var curCount;//当前剩余秒数
      function sendMessage() {
          curCount = count;
          $("#btn").attr("disabled", "true");
          $("#btn").val(curCount + "秒后可重新发送");
          InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次请求后台发送验证码 TODO
      }

      //timer处理函数
      function SetRemainTime() {
          if (curCount == 0) {
              window.clearInterval(InterValObj);//停止计时器
              $("#btn").removeAttr("disabled");//启用按钮
              $("#btn").val("重新发送验证码");
          } else {
              curCount--;
              $("#btn").val(curCount + "秒后可重新发送");
          }
      }
  </script>
  <script type="text/javascript">
      layui.use(['layer','form'], function () {
          $ = layui.jquery;
          var layer = layui.layer;
          var form = layui.form;
          var sms = "";
          form.on('submit(loginByPassword)', function(data){
              $.ajax({
                  type:"post",
                  contentType : 'application/json',
                  url:"/admin/loginByPassword",
                  data:JSON.stringify(data.field),
                  dataType : 'json',
                  success:function(data) {
                      if(data.code=='200'){
                          console.log(data);
                          layer.msg('登录成功',
                              {
                                  icon:1,
                                  time: 1000
                              },function(){
                                  window.location.href = "/index";
                              })
                      }
                      else {
                          console.log(data);
                          layer.alert(data.msg, {icon: 2},function(index){
                              document.getElementById("yzm").click();
                              layer.close(index);
                          });
                      }
                  }
              });
              return false;
          });
          form.on('submit(loginByPhone)', function(data){
              $.ajax({
                  type:"post",
                  contentType : 'application/json',
                  url:"/admin/loginByPhone",
                  data:JSON.stringify(data.field),
                  dataType : 'json',
                  success:function(data) {
                      if(data.code=='200'){
                          layer.msg('登录成功',
                              {
                                  icon:1,
                                  time: 1000
                              },function(){
                                  window.location.href = "/index";
                              })
                      }
                      else {
                          layer.alert(data.result, {icon: 2});

                      }
                  }
              });
              return false;
          });
          $("#btn").click(function () {
              var phone = $("#phone").val();
              if (phone != "") {
                  $.ajax({
                      url: "/SendSMS",
                      type: "post",
                      data: {
                          "phone": phone
                      },
                      success: function (data) {
                          if (data.code == '200') {
                              layer.alert('已发送', {icon: 1});
                          }else{
                              layer.alert('发送失败', {icon: 2});
                          }
                      }
                  });
              } else {
                  layer.alert('请输入手机号码', {icon: 4});
                  return false;
              }
          });
      });
  </script>
</body>
</html>